<template>
  <card-box title="事件监管">
    <kb-select slot="header" v-model="yearValue"></kb-select>
    <div class="kb-event-info" v-loading="loading" :element-loading-background="loadingBg"
      :element-loading-text="loadingTxt">
      <div class="decoration"></div>
      <div class="statistical-item">
        <div class="count">{{ formatNumberWithCommas(reportTotal) }}</div>
        <div class="label">事件图斑报告数</div>
      </div>
      <div class="decoration"></div>
      <div class="statistical-item">
        <div class="count">{{ daysTotal }}<span class="unit">/天</span></div>
        <div class="label">
          <div class="percentage">处理效率：<span class="rate">
              <div class="triangle"></div>1.3%
            </span>环比：<span class="rate">
              <div class="triangle"></div>1.4%
            </span></div>
          <div>平均处理时长</div>
        </div>
      </div>
      <div class="decoration"></div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
export default {
  mixins: [CommonMixin],
  data() {
    return {
      yearValue: 2024,
      code: 'EVENTS',
      loading: false,
      reportTotal: 0,
      daysTotal: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      this.reportTotal = dataResult.reduce((pre, cur) => pre + (cur.total_count * 1), 0)
      const issuedCount = dataResult.reduce((pre, cur) => pre + (cur.issued_count * 1), 0)
      const daysCount = dataResult.reduce((pre, cur) => pre + (cur.avg_maturity_days * 1), 0)
      this.daysTotal = parseInt(daysCount / issuedCount)
      // console.log('resdata:', res.data)

    }
  }
}
</script>
<style lang="scss" scoped>
.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: tvw(5) solid transparent;
  border-right: tvw(5) solid transparent;
  border-bottom: tvw(5) solid #20F3FB;
  // box-shadow: 0 0 tvw(5) #20F3FB;
}


.kb-event-info {
  display: flex;
  align-items: center;
  // padding: tvh(17) 0;
  height: tvh(175);

  .statistical-item {
    position: relative;
    flex: 1;
    height: tvw(158);
    background: url(~@/assets/images/yyzhkb/event-item-bg.svg) center center no-repeat;
    background-size: 100% 100%;

    .percentage {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rate {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #20F3FB;
    }

    .count {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      font-size: tvw(22);
      font-weight: bold;
      color: #fff;

      .unit {
        font-size: 14px;
        font-weight: normal;
      }
    }

    .label {
      position: absolute;
      bottom: tvw(42);
      left: 50%;
      transform: translateX(-50%);
      font-size: tvw(12);
      color: #fff;
      white-space: nowrap;
      text-align: center;
    }
  }

  .decoration {
    width: tvw(9);
    height: tvw(55);
    margin: 0 tvw(7);
    background: linear-gradient(360deg, rgba(31, 91, 149, 0) 0%, rgba(31, 91, 149, 0) 16%, rgba(31, 91, 149, 0.01) 32%, rgba(31, 91, 149, 0.07) 49%, rgba(31, 91, 149, 0.21) 66%, rgba(31, 91, 149, 0.5) 83%, rgba(31, 91, 149, 1) 100%);
  }
}
</style>